import React from 'react';
import {Input, Form, Row, Col, Select} from 'antd';

import RCModal from '@components/modal/index.jsx';
import {partyBranch, meetingType} from '@assets/config/global.js';

import './scss/parter_meet_modal.scss';

const FormItem = Form.Item;
const Option = Select.Option;
const TextArea = Input.TextArea;

class ParterMeetModal extends React.Component {

    componentDidMount() {
        this.props.form.validateFields();
    }

    // 判断是否可以提交
    hasErrors(fieldsError) {
        let disabled = Object.keys(fieldsError).some(field => fieldsError[field]);
        return disabled;
    }

    // 点击提交
    submitForm() {
        let formInfo = this.props.form.getFieldsValue();
        this.props.submitForm(formInfo);
        this.props.form.resetFields();
    }

    // 取消关闭按钮
    onCancel() {
        this.props.form.resetFields();
        this.props.cancelForm();
    }

    render() {

        let {modalVisible = false, showFooter = false, data = {}} = this.props;

        const formItemLayout = {
            colon: false,
            labelCol: {
                span: 8
            },
            wrapperCol: {
                span: 16
            }
        };

        const {getFieldDecorator, getFieldsError, getFieldError, isFieldTouched} = this.props.form;
        const rules = [{required: true, message: '必填项！'}];

        const meetThemeError = isFieldTouched('topic') && getFieldError('topic');// 会议主题不能为空
        const partyBranchError = isFieldTouched('orgId') && getFieldError('orgId');//所属党支部不能为空
        const meetTimeError = isFieldTouched('time') && getFieldError('time');//会议时间不能为空
        const meetPosError = isFieldTouched('site') && getFieldError('site');//会议地点不能为空
        const meetTypeError = isFieldTouched('meetingType') && getFieldError('meetingType');//会议类型不能为空
        const meetPepleError = isFieldTouched('participants') && getFieldError('participants');//会议内容不能为空
        const meetMainError = isFieldTouched('introduction') && getFieldError('introduction');//会议内容不能为空

        return (
            <RCModal
                visible={modalVisible}
                showFooter={showFooter}
                title='两学一做'
                footerText={{okText: '提交'}}
                disabled={this.hasErrors(getFieldsError())}
                onOk={this.submitForm.bind(this)}
                onCancel={this.onCancel.bind(this)}
            >
                <Form layout='horizontal'>
                    <div className="parter-meet-modal modal-content">
                        <Row>
                            <Col span={24}>
                                <FormItem label='会议主题' {...formItemLayout}
                                          validateStatus={meetThemeError ? 'error' : ''}
                                          help={meetThemeError || ''}
                                >
                                    {
                                        getFieldDecorator('topic', {initialValue: data.topic || '', rules})(
                                            <Input placeholder='请输入'/>
                                        )
                                    }
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={24}>
                                <FormItem label='所属党支部' {...formItemLayout}
                                          validateStatus={partyBranchError ? 'error' : ''}
                                          help={partyBranchError || ''}
                                >
                                    {
                                        getFieldDecorator('orgId', partyBranch[data.orgId] ? {initialValue: data.orgId, rules } : {rules})(
                                            <Select style={{width: '100%'}} placeholder='请选择'>
                                                {
                                                    Object.keys(partyBranch).map((item, index) => {
                                                        return (
                                                            <Option value={partyBranch[item].orgId} key={index}>{partyBranch[item].name}</Option>
                                                        )
                                                    })
                                                }
                                            </Select>
                                        )
                                    }
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={24}>
                                <FormItem label='会议时间' {...formItemLayout}
                                          validateStatus={meetTimeError ? 'error' : ''}
                                          help={meetTimeError || ''}
                                >
                                    {
                                        getFieldDecorator('time', {initialValue: data.time || '', rules})(
                                            <Input placeholder='请输入'/>
                                        )
                                    }
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={24}>
                                <FormItem label='会议地点' {...formItemLayout}
                                          validateStatus={meetPosError ? 'error' : ''}
                                          help={meetPosError || ''}
                                >
                                    {
                                        getFieldDecorator('site', {initialValue: data.site || '', rules})(
                                            <Input placeholder='请输入' />
                                        )
                                    }
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={24}>
                                <FormItem label='会议类型' {...formItemLayout}
                                          validateStatus={meetTypeError ? 'error' : ''}
                                          help={meetTypeError || ''}
                                >
                                    {
                                        getFieldDecorator('meetingType', meetingType[data.meetingType] ? {initialValue: data.meetingType, rules} : {rules})(
                                            <Select style={{width: '100%'}} placeholder='请选择'>
                                                {
                                                    Object.keys(meetingType).map((item, index) => {
                                                        return (
                                                            <Option value={meetingType[item].id} key={index}>{meetingType[item].name}</Option>
                                                        )
                                                    })
                                                }
                                            </Select>
                                        )
                                    }
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={24}>
                                <FormItem label='会议主要人员' {...formItemLayout}
                                          validateStatus={meetPepleError ? 'error' : ''}
                                          help={meetPepleError || ''}
                                >
                                    {
                                        getFieldDecorator('participants', {initialValue: data.participants || '', rules})(
                                            <Input placeholder='请输入'/>
                                        )
                                    }
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={24}>
                                <FormItem label='会议主要内容' {...formItemLayout}
                                          validateStatus={meetMainError ? 'error' : ''}
                                          help={meetMainError || ''}
                                >
                                    {
                                        getFieldDecorator('introduction', {initialValue: data.introduction || '', rules})(
                                            <TextArea placeholder='请输入' rows={4}/>
                                        )
                                    }
                                </FormItem>
                            </Col>
                        </Row>
                    </div>
                </Form>

            </RCModal>
        )
    }
}

ParterMeetModal = Form.create({})(ParterMeetModal);
export default ParterMeetModal;